<template>
  <div class="pc" v-if="store.state.isPc">
    <div class="headbanner" id="headbanner"></div>
    <div class="head">
      <div class="menu">
        <ul v-if="$route.path == '/'">
          <li v-for="(item, index) in classlist.value" :key="item.route">
            <a @click="golist(item.route)">{{ item.class_name }} </a>
          </li>
        </ul>
        <el-breadcrumb separator="》" class="breadcrumbbox" v-else>
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
  </div>
  <div class="mob" v-else>
    <div class="banner" id="headbanner">
      <img :src="bannerurl.value" alt="" />
      <div class="span" @click="navshow = !navshow" v-if="$route.path == '/'">
        <el-icon :size="24"><Menu /></el-icon>
      </div>

      <div class="tab" v-if="navshow">
        <van-nav-bar
          title="标题"
          left-text="返回"
          left-arrow
          @click-left="navshow = !navshow"
        />
        <ul v-if="$route.path == '/'">
          <li v-for="(item, index) in classlist.value" :key="item.route">
            <a :href="item.route" @click="golist(item.route)"
              >{{ item.class_name }}
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div class="menu" v-if="$route.path != '/'">
      <el-breadcrumb separator="》" class="breadcrumbbox">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </div>
  <div class="body">
    <el-config-provider :locale="zhCn">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" v-if="$route.meta.keepAlive" />
        </keep-alive>
        <component :is="Component" v-if="!$route.meta.keepAlive" />
      </router-view>
    </el-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { allNewsClass } from "../../api/api";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { onMounted } from "vue";
import { Menu, Close } from "@element-plus/icons-vue";
import bannerbg from "../../assets/banner.jpg";
import { useStore } from "vuex";
let $route = useRoute();
let $router = useRouter();
let store = useStore();
onMounted(() => {
  getclass();
});
let navshow = ref(false);
let classlist: any = reactive({ value: [] });
let bannerurl = reactive({ value: bannerbg });
const getclass = () => {
  allNewsClass().then((res) => {
    classlist.value = res.data;

    //处理banner
    console.log($route.query.route);
    let banner: any = document.getElementById("headbanner");

    if ($route.path == "/download" && $route.query.route != undefined) {
      let url = "";
      classlist.value.forEach((item: any) => {
        if ($route.query.route == item.route) {
          url = item.img;
        }
      });

      banner.style.background = `url(${url}) no-repeat`;
      // banner.style.background = `url(${bannerbg}) no-repeat`;
      banner.style.backgroundSize = `100% 101%`;

      bannerurl.value = url;
    }
    if ($route.path == "/") {
      banner.style.background = `url(${classlist.value[0]?.img}) no-repeat`;
      banner.style.backgroundSize = `100% 101%`;
      bannerurl.value = bannerbg;
    }
  });
};

const golist = (value: any) => {
  navshow.value = false;
  let data: any = {};
  classlist.value.forEach((item: any, index: number) => {
    if (item.route == value) {
      data = item;
    }
  });
  console.log(data);
  if (value == "#dialogue") {
    window.open(`/school?name=${data.class_name}`);
  } else if (value == "#annual") {
    $router.push({
      path: "/annual",
      query: { route: data.route, class_id: data.id, name: data.class_name },
    });
  } else {
    $router.push({
      path: "/download",
      query: { route: data.route, class_id: data.id, name: data.class_name },
    });
  }
  // window.open(
  //   `/download?name=${data.class_name}&class_id=${data.id}&route=${data.route}`
  // );
};

watch(
  () => $route.path,
  () => {
    getclass();
  }
);
</script>

<style lang="scss" scoped>
.pc {
  :deep(.breadcrumbbox) {
    height: 80px;
    line-height: 80px;
    color: white;
    --el-text-color-regular: white !important;
    .is-link {
      height: 80px;
      line-height: 80px;
      font-size: 24px;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #ffffff;
    }
    .el-breadcrumb__inner {
      height: 80px;
      line-height: 80px;
      font-size: 20px;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #ffffff;
      &:hover {
        color: white;
      }
    }
    .el-breadcrumb__separator {
      height: 80px;
      line-height: 80px;
      font-size: 20px;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #ffffff;
      &:hover {
        color: white;
      }
    }
  }
  .headbanner {
    height: calc(100vh - 80px);
    width: 100%;
    background: url("../../assets/banner.jpg") no-repeat;
    background-size: 100% 101%;
    overflow: hidden;
  }
  .head {
    height: 80px;
    display: flex;
    width: 100%;
    background: #0d0a65;
    z-index: 999;
    box-shadow: 0 1px 3px #66666663;

    .menu {
      height: 80px;
      width: 1400px;
      margin: 0 auto;
      display: flex;

      padding: 0 15px;
      ul {
        width: 100%;
        padding: 0 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 1.6667vw;
        font-weight: bold;
        color: white;
        li {
          cursor: pointer;
        }
      }
    }
    .navShow {
      animation: leftnav 0.5s linear;
      -webkit-animation: leftnav 0.5s linear;

      .nav-item {
        line-height: 18px !important;
        color: #999;
      }

      .active {
        background: #0d0a65;
        font-weight: 700;
        color: #fff;
      }
      .leftNav-item {
        // border-bottom: 1px solid #eee;
        height: 50px;
        padding: 5px;
        box-sizing: border-box;
        font-size: 16px;
        cursor: pointer;
        line-height: 25px;
        &:first-child {
          line-height: 36px;
        }
      }
      a {
        text-decoration: none;
      }
      .leftNav {
        width: 60px;
        line-height: 16px;
        background: #fff;
        color: #777;
        position: fixed;
        left: 1%;
        top: 20%;
        text-align: center;
        box-shadow: 0 0 6px #999;
        z-index: 9;
      }
    }
  }
  .sticky {
    animation: myfirst 1s;
    -webkit-animation: myfirst 1s;
    animation-fill-mode: forwards;
  }

  .stickyback {
    animation: mybackfirst 1s;
    -webkit-animation: mybackfirst 1s;
    animation-fill-mode: forwards;
  }
}
.mob {
  :deep(.breadcrumbbox) {
    margin-left: 2rem;
    height: 5rem;
    line-height: 5rem;
    color: white;
    --el-text-color-regular: white !important;
    .is-link {
      height: 5rem;
      line-height: 5rem;
      font-size: 1.5rem;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #ffffff;
    }
    .el-breadcrumb__inner {
      height: 5rem;
      line-height: 5rem;
      font-size: 1.5rem;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #ffffff;
      &:hover {
        color: white;
      }
    }
    .el-breadcrumb__separator {
      height: 5rem;
      line-height: 5rem;
      font-size: 1.5rem;
      font-family: Source Han Sans-Regular, Source Han Sans;
      font-weight: 400;
      color: #ffffff;
      &:hover {
        color: white;
      }
    }
  }
  width: 100%;
  .banner {
    width: 100%;
    height: 21.875rem;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .span {
      position: absolute;
      right: 8%;
      top: 8%;
      z-index: 99;
      color: white;
      cursor: pointer;
    }

    .tab {
      width: 100%;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 999;
      background: white;
      ul {
        padding: 15px;
        li {
          height: 5.375rem;
          line-height: 5.375rem;
          padding-left: 20px;

          border-bottom: 1px solid #ccc;
          a {
            color: #0d0a65;
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
    }
  }
  .menu {
    height: 5rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    padding: 0 0.9375rem;
    background: #0d0a65;
    ul {
      width: 100%;
      padding: 0 5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 1.6667vw;
      font-weight: bold;
      color: white;
    }
  }
}

.body {
  width: 100%;
  overflow-x: hidden;
  background: white;
  background: url("../../assets/bodybg.png") repeat;
  background-size: 60%;
}
</style>
